<meta charset="UTF-8">
<title>carousel</title>

<div class="carousel">
	<div>
		<div>
			<a href="topic/?id=283">
				<img src="http://imgu.3gtv.net:9090/_file/section/20150919114717260.jpg">
			</a>
		</div>
		<div>
			<a href="live/?id=3">
				<img src="http://imgu.3gtv.net:9090/_file/section/20150918214948448.png">
			</a>
		</div>
		<div>
			<a href="topic/?id=346">
				<img src="http://imgu.3gtv.net:9090/_file/section/20150910171423733.png">
			</a>
		</div>
		<div>
			<a href="topic/?id=345">
				<img src="http://imgu.3gtv.net:9090/_file/section/20150909172539065.jpg">
			</a>
		</div>
		 
	</div>
</div>

<style>
	.carousel{
		height:250px;
		width:400px;
		overflow:hidden;
		position: relative;
	}
	
	.carousel > div{ /* mover */
		left:0;
		position:absolute;
		white-space: nowrap;
		width : 800px;
		height:188px;
		overflow:hidden;
	}
	
	.carousel > div > div{
		float: left;
		width : 400px;
	}
	.carousel > div > div img {
		width: 100%;
	}
	
	.hide{
		display:none;
	}
</style>

<script>
Function.prototype.delegate = function () {  
    var self = this, scope = this.scope, args = arguments, aLength = arguments.length, fnToken = 'function';  
  
    return function(){  
        var bLength = arguments.length, Length = (aLength > bLength) ? aLength : bLength;  
  
        // mission one:  
        for (var i = 0; i < Length; i++)  
            if (arguments[i])args[i] = arguments[i]; // 拷贝参数  
  
        args.length = Length; // 在 MS jscript下面，arguments作为数字来使用还是有问题，就是length不能自动更新。修正如左:  
  
        // mission two:  
        for (var i = 0, j = args.length; i < j; i++) {  
            var _arg = args[i];  
            if (_arg && typeof _arg == fnToken && _arg.late == true)  
                args[i] = _arg.apply(scope || this, args);  
        }  
  
        return self.apply(scope || this, args);  
    };  
};  

getInt=function(mover){
	var result = mover.style.left.match(/-?\d+/);
	if(!result) return 0;
	else{
		return parseInt(result[0]);
	}
	
}
/**
	 * 增加元素样式。
	 * @param {String} cls
	 */
	Element.prototype.addCls = function (cls) {
		cls = removeFirstDot(cls);

		var _cls = this.className;
		if (_cls.indexOf(cls) === -1) {
			// not found, so add it
			if (_cls === '')this.className = cls;
			else this.className += ' ' + cls;
		}
		
		return this;
	}
	
	/**
	 * 移除元素样式。
	 * @param {String} cls
	 */
	Element.prototype.removeCls = function (cls) {
		cls = removeFirstDot(cls);
		var _cls = this.className;
		var reg = new RegExp('\\s?\\b' + cls + '\\b', 'ig');
		if (reg.test(_cls)) 
			this.className = _cls.replace(reg, '');// remove it
		
		return this;
	}
	
	/**
	* 轮回样式。
	* @param {String} cls 样式
	*/
	Element.prototype.toggleCls = function (cls) {
		cls = removeFirstDot(cls);
		
		var _cls = this.className;
		var reg = new RegExp('\\s?\\b' + cls + '\\b');
		if (reg.test(_cls))
			this.className = _cls.replace(reg, '');// remove it
		else {
			// add it
			if (_cls === '') this.className = cls;
			else this.className += ' ' + cls;
		}
		
		return this;
	}
	
		var emptyStr = '';
	// 允许用户输入 .abc/abc 的 CSS Selector，推荐 abc 即可
	function removeFirstDot(str){
		if(str && str.charAt(0) === '.'){
			var arr = str.split(emptyStr);
			arr.shift();
			return arr.join(emptyStr);
		}
		
		return str;
	}
	
function Carousel(el) {
	var containerWidth = el.clientWidth, 
		mover = el.querySelector('div'),
		items = mover.children, len = items.length;
	
    var count = 0;

	window.runTo = function (targetIndex){
		var move;
		if(targetIndex > count ){
			//debugger;
			move = -400;
			for(var p = 0; p < len; p++){
				if(p == targetIndex||p==count){
					items[p].removeCls('hide');
				}else{
					items[p].addCls('hide');
				}
			}
			for(var p = 0; p < len; p++){
				if(p > count && p < targetIndex ){
					items[p].addCls('hide');
				}else{
					//items[p].removeCls('hide');
				}
			}
		}else{
			for(var p = 0; p < len; p++){
				items[p].style.float = 'right';
			}
			for(var p = 0; p < len; p++){
				if(p > targetIndex && p < count){
					items[p].addCls('hide');
				}else{
					//items[p].removeCls('hide');
				}
			}
			move = 400;
			//items[0].className = 'hide';
		}
		items[targetIndex].removeCls('hide');
		//items[targetIndex].addCls('selected');
		/*
		for(var p = 0; p < len; p++){
			if(p > count && p < targetIndex){
				items[p].className = 'hide';
			}else if(p == targetIndex){
				items[p].className = '';
			}
		}*/
	
	if(move>=0){
		move = '0';
	}else{
		move = move+'px';
	}
	
		mover.style.transition = 'left 900ms linear';
		mover.style.left = move;
		
		
		function end(count){
			//mover.style.transition = 'initial';
			//mover.style.left = '0';
			//current && (current.className = 'hide');
		}
		Carousel.onEnd = end;
		//if(targetIndex > count){
		mover.addEventListener("transitionend", function(){
			//Carousel.onEnd();
		});
		
		setTimeout(end.delegate(count), 900);
		count = targetIndex;

    }
	

}

Carousel.onEnd = function(){}
	
new Carousel(document.querySelector('.carousel'));
</script>
